﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Vue Demo</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />    
    <style>
        .itemContent{
                margin-top: 10px;
        padding: 0px;
        border: 1px solid #4caf50;
        border-radius: 5px;
        }
        .itemContent .title{
            padding: 10px;
        background-color: #4CAF50;
        color: #f5f5f5;
        text-align: center;
        }
        .itemContent .content{
            padding:10px;
            text-align:center;
        }
    </style>
</head>
<body style="margin-bottom:30px;">
    <div class="container">
        <div id="vue1" class="itemContent">
            <div class="title">Vue1————最基本案例(初始化、方法调用、数据绑定)</div>
            <div class="content">title:{{title}}
                <button class="btn btn-danger" v-on:click="changeTitle()">Change_绑定方式2</button>
            </div>
        </div>
        <div id="vue2" class="itemContent">
            <div class="title">Vue2————与其他Vue通信,采用Vm.$data、vm.$compteted、Vm.$watch 等来调用，方法调用则直接Vm.funciton</div>
            <div class="content">
                title:{{title}}<button class="btn btn-danger" @click="changeTitle()">修改Vue1的值</button>
                <button class="btn btn-success" v-on:click="callOherVueMethod()">调用其他Vue的方法</button>
            </div>
        </div>
        <div id="vue3" class="itemContent">
            <div class="title">Vue3————同源数据相互影响</div>
            <div class="content">
                <h1>site : {{site}}</h1>
                <h1>url : {{url}}</h1>
                <h1>Alexa : {{alexa}}</h1>
            </div>
        </div>
        <div id="vue4" class="itemContent">
            <div class="title">数据绑定篇（v-bind 指令被用来响应地更新 HTML 属性、v-on 指令，它用于监听 DOM 事件）</div>
            <div class="content" style="text-align:left;">
               1 方法1--双大括号<br/>name : {{name}}<br/>
               2 方法2--v-html<br/><span v-html="name"></span><br /><br/>
               3 样式的绑定-- v-bind:class,v-bind:style<br/>
               <button class="btn" v-bind:class="{'btn-danger':flag}">样式绑定</button><br/>
               4 javascript表达式<br/>
                <span v-bind:id="'list-' + id">菜鸟教程</span><br/>
               5)If表达式--v-if<br/>
                <span v-if="flag">abc</span><br/>
               6)url绑定--v-bind:href,简写:href<br/>
                <a v-bind:href="url" target="_blank">菜鸟教程</a><br />
               7）监听绑定事件v-on:click,简写@click<br/>
               8)v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定<br />
               9)简写命令v-bind:href可简写为:href,v-on:click,简写@click<br />
               10)条件表达式：v-if、v-else-if、v-else、v-show<br />
               11)数据循环：v-for 如：v-for="o in list"
            </div>
        </div>

        <div id="vue5" class="itemContent">
            <div class="title">过滤器</div>
            <div class="content" style="text-align:left;">
              {{ message | capitalize |split }}
            </div>
        </div>

        <div id="vue6" class="itemContent">
            <div class="title">属性计算Computed</div>
            <div class="content" style="text-align:left;">
                <p>原始字符串: {{ message }}</p>
                <p>计算后反转字符串: {{ reversedMessage }}</p>
                <p>计算后反转字符串: {{ reversedMessage }}</p>
                <p>使用方法后反转字符串: {{ reversedMessage2('function') }}</p>
                <p>使用方法后反转字符串: {{ reversedMessage2('function') }}</p>
            </div>
        </div>

        <div id="vue7" class="itemContent">
            <div class="title">属性监听</div>
            <div class="content" style="text-align:left;">
                <div id="computed_props">
                    千米 : <input type="text" v-model="kilometers">
                    米 : <input type="text" v-model="meters">
                </div>
                <p id="info"></p>
                <p id="info2"></p>
            </div>
        </div>

        <div id="vue8" class="itemContent">
            <div class="title">事件处理</div>
            <div class="content" style="text-align:left;">
                详细地址:  https://www.runoob.com/vue2/vue-events.html
                <button v-on:keyup.enter="say('hi')">Say hi</button>
                <button v-on:click="say('what')">Say what</button>               
            </div>
        </div>


        <div id="vue9" class="itemContent">
            <div class="title">表单</div>
            <div class="content" style="text-align:left;">
                详细地址:  https://www.runoob.com/vue2/vue-forms.html
                <input type="radio" id="runoob" value="Runoob" v-model="picked">
                <label for="runoob">Runoob</label>
                <br>
                <input type="radio" id="google" value="Google" v-model="picked">
                <label for="google">Google</label>
                <br>
                <span>选中值为: {{ picked }}</span>

                <select v-model="selected" name="fruit">
                    <option value="">选择一个网站</option>
                    <option value="www.runoob.com">Runoob</option>
                    <option value="www.google.com">Google</option>
                </select>
                <div id="output">
                    选择的网站是: {{selected}}
                </div>
            </div>
        </div>



        <div id="vue10" class="itemContent">
            <div class="title">组建Component</div>
            <div class="content" style="text-align:left;">
                详细地址:  https://www.runoob.com/vue2/vue-component.html
               <zocz></zocz>
                <private_zocz1></private_zocz1>
                <private_zocz2></private_zocz2>
                <span style="color:#f00;">-----Prop 参数-----</span>
                <child message="组建变量传递1!" kkk='组建变量传递2' v-bind:gg="parentMsg"></child>
                <span style="color:#f00;">----动态 Prop 参数-----</span>
                <child v-bind:message="parentMsg" v-bind:kkk='parentMsg' v-bind:gg="parentMsg"></child>
                <span style="color:#f00;">----Prop 遍历参数-----</span>
                <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
            </div>
        </div>

        <div id="vue11" class="itemContent">
            <div class="title">---自定义组件---</div>
            <div class="content" style="text-align:left;">
                详细地址:  https://www.runoob.com/vue2/vue-component.html
                <p>{{ total }}</p>
                <p><input type="text" v-model="value" /></p>
                <div-counter v-on:increment="incrementTotal" v-on:sss="yourinput"></div-counter>
                <div-counter v-on:increment="incrementTotal" v-on:sss="yourinput"></div-counter>
            </div>
        </div>

        <div id="vue12" class="itemContent">
            <div class="title">指令 directive</div>
            <div class="content" style="text-align:left;">
                详细地址:  https://www.runoob.com/vue2/vue-custom-directive.html
                <div v-runoob="{ color: '#f00', text: '菜鸟教程!',padding:'10px' }"></div>

                <span style="color:#f00;">----了解钩子函数-----</span>
            </div>
        </div>


        <div id="vue13" class="itemContent">
            <div class="title">动画</div>
            <div class="content" style="text-align:left;">
                详细地址: https://www.runoob.com/vue2/vue-transitions.html
                
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var vm =new Vue({
            el: '#vue1',
            data: {
                title:"init_title",
            },
            methods: {
                changeTitle: function () {
                    this.title = this.title + "_change_title" + this.getValue('aabcdd');
                },
                getValue:function(a){
                    return a+"getValue";
                },
                post: function () {
                    //发送 post 请求
                    $.post("", JSON.stringify({}), function (rs) {
                        //$.each(function (index, item) {});
                        console.log(rs);
                    });
                }
            },
        });





        var vm2 = new Vue({
            el: '#vue2',
            data: {
                title: "vue2",
            },
            methods: {
                changeTitle: function () {
                    vm.$data.title = this.title+"";
                },
                callOherVueMethod: function () {
                    vm.changeTitle();
                }
            }
        });







        var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000 }
        var vm3 = new Vue({
            el: '#vue3',
            data: data
        });
        vm3.site = "Runoob";
        data.alexa = 1234;


        var vm4 = new Vue({
            el: '#vue4',
            data: {
                name: "this is vue name",
                flag: true,
                id: 1,
                url:"http://www.baidu.com"
            }
        });



        var vm5 = new Vue({
            el: '#vue5',
            data: {
                message: 'runoobabcdefg'
            },
            filters: {
                capitalize: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)
                },
                split: function (value) {
                    return value.substr(0, 6);
                }
            }
        });

        var cnt = 1;
        var vm6 = new Vue({
            el: '#vue6',
            data: {
                message: 'zhangouchuanzi'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    cnt += 1;
                    return cnt + this.message.split('').reverse().join('') ;
                }
            },
            methods: {
                reversedMessage2: function (a) {
                    cnt += 1;
                    return cnt + this.message.split('').reverse().join('')+a;
                }
            }
        });



        var vm7 = new Vue({
            el: '#vue7',
            data: {
                kilometers: 0,
                meters: 0
            },
            methods: {
                test: function () {
                    console.log("vm7", "this is a function");
                }
            },
            computed: {
            },
            watch: {
                kilometers: function (val) {
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000
                },
                meters: function (val) {
                    this.kilometers = val / 1000;
                    this.meters = val;
                }
            }
        });
        // $watch 是一个实例方法
        vm7.test();

        vm7.$watch('kilometers', function (newValue, oldValue) {
            // 这个回调将在 vm.kilometers 改变后调用
            document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        })
        vm7.$watch('meters', function (newValue, oldValue) {
            // 这个回调将在 vm.kilometers 改变后调用
            document.getElementById("info2").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        })


        var vm8 = new Vue({
            el: '#vue8',
            data: {
                kilometers: 0,
                meters: 0
            },
            methods: {
                say: function (message) {
                    alert(message)
                }
            }
        });


        var vm8 = new Vue({
            el: '#vue9',
            data: {
                picked: 'Runoob',
                selected:''
            }
        });

        Vue.component("zocz", { template: '<h1>这是个全局组建--张欧川子!</h1>' });

        Vue.component('child', {
            // 声明 props
            props: ['message', 'kkk', 'gg'],
            // 同样也可以在 vm 实例中像 “this.message” 这样使用
            template: '<div><span>{{ message }}</span></br><span>{{kkk}}</span><br/><span>{{gg}}</span></div>'
        })
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{todo.index}} {{ todo.text }}</li>'
        })
        
        var vue10 = new Vue({
            el: "#vue10",
            data: {
                parentMsg: "parentMsg",
                sites: [
                  { index:1, text: 'Runoob' },
                  { index: 2, text: 'Google' },
                  { index: 3, text: 'Taobao' }
                  ]
            },
            computed: {},
            components: {
                'private_zocz1': { template: "<h1>只是一个局部组建1--张欧川子</h1>" },
                'private_zocz2': { template: "<h1>只是一个局部组建2--张欧川子</h1>" }
            }
        });
    </script>
    <script>
        var data = {
            counter: 0,
            value: 0,
            total: 0
        }
        var thetemplate = '<div>';
        thetemplate += '<button v-on:click="incrementHandler">{{ counter }}</button>';
        thetemplate += '<input type="text" v-model="value"/><button v-on:click="getinput">getinput</button>';
        thetemplate += '</div>';

        Vue.component('div-counter', {
            template: thetemplate,
            data: function () {
                return data;
            },
            methods: {
                incrementHandler: function () {
                    this.counter += 1
                    this.$emit('increment')
                },
                getinput: function () {
                    alert(this.value);
                    this.$emit('sss');
                }
            },
        })
        var vue11 = new Vue({
            el: '#vue11',
            data: data,
            methods: {
                incrementTotal: function () {
                    this.total += 1
                },
                yourinput: function () {
                    alert('your input');
                }
            }
        })

        Vue.directive('runoob', function (el, binding) {
            // 简写方式设置文本及背景颜色
            el.innerHTML = binding.value.text
            el.style.backgroundColor = binding.value.color
            el.style.padding = binding.value.padding
        })


        var vue12 = new Vue({
            el: '#vue12'
        })


        var vue13 = new Vue({
            el: '#vue13'
        })

    </script>
</body>
</html>